<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title>ESIEA - ERG5203[Karim SEKAF] - CRUD Application</title>
    
    <!-- Boostrap -->
    <link href="/apps/crud/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/crud/css/style.css" rel="stylesheet">
  </head>

  <body>  
	  <div id="layout">
	    <div id="header" class="page-header">
	    	<br/>
	   		<h1>CRUD Application </h1>
	    </div>
	    
	    <div id="side">       
	   		<ul id="side-header" class="nav nav-list">	    	    	
				<li>
					<div class="input-append pagination-centered">
						<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
					</div>
				</li>
				<li class="divider"></li>
				<li class="nav-header">Contacts: </li>				    				   
			</ul>
			<div id="side-contacts">
				<ul class="thumbnails">
				<c:forEach var="contact" items="${ contacts }">
					<li <c:out value="id=\"${ contact.id }\"" escapeXml="false"></c:out> class="contact-thumbnail span4">
						<a id="" class="thumbnail span2" onclick="readContact(${ contact.id }, '#content')">	
							<h4 class="span2">${ contact.name } ${ contact.firstname }</h4>
							<p class="span4"><small> ${ contact.birthday } </small></p>
							<p class="span4"> ${ contact.email } </p>
						</a>					
					</li>
				</c:forEach>											   
				</ul>
			</div> 
			<div id="side-bar" class="pagination-centered">
				<button id="btnNewContact" type="submit" class="btn btn-primary" onclick="loadCreationForm('#content')"> New </button>
			</div>   	
	    </div>
	    
	    <div id="content"></div>
	</div>
	   
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/apps/crud/js/bootstrap.min.js"></script>
    <script src="/apps/crud/js/crud-ajax-manager.js"></script>    
  </body>
</html>
